<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Partytown Test Page" />
  <title>Iframe</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
        Apple Color Emoji, Segoe UI Emoji;
      font-size: 12px;
    }

    h1 {
      margin: 0 0 15px 0;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
      padding: 16px 8px;
    }

    a:link,
    a:visited {
      text-decoration: none;
      color: blue;
    }

    a:hover {
      background-color: #eee;
    }

    li {
      display: block;
      height: 80px;
    }

    li strong,
    li code,
    li button {
      white-space: nowrap;
      margin: 0 5px;
      min-width: 10px;
    }

    iframe {
      width: 100%;
      height: 36px;
      border: none;
    }
  </style>
  <script>
    window.name = 'Main';
  </script>
  <script>
    partytown = {
      logCalls: true,
      logGetters: true,
      logSetters: true,
      logImageRequests: true,
      logSendBeaconRequests: true,
      logStackTraces: false,
      logScriptExecution: true,
    };
  </script>
  <script src="/~partytown/debug/partytown.js"></script>
</head>

<body>
  <h1>Iframe</h1>
  <ul>

    <li>
      <strong>parent calls iframe's one.two.sum()</strong>
      <code id="testMemberNames"></code>
      <script type="text/partytown">
          const elm = document.getElementById('testMemberNames');
          const iframe = document.createElement('iframe');
          elm.parentNode.insertBefore(iframe, null);
          iframe.contentWindow.document.head.innerHTML = `
            <style>body { background: orange; }</style>
          `;
          const script = iframe.contentDocument.createElement('script');
          script.innerHTML = `
            one = {
              two: {
                sum(years) {
                  return 1955 + years;
                },
                num: 30,
              },
            };
          `;
          iframe.contentDocument.body.appendChild(script);

          const iframeWin = iframe.contentWindow;
          const iframeOne = iframeWin.one;
          const iframeTwo = iframeOne.two;
          const iframeSum = iframeTwo.sum;
          const iframeNum = iframeTwo.num;

          const result = iframeSum(iframeNum);

          const div = iframe.contentDocument.createElement('div');
          div.id = 'output';
          div.textContent = result;
          iframe.contentWindow.document.body.appendChild(div);

          elm.textContent = iframe.contentDocument.getElementById('output').textContent;
          elm.className = 'testMemberNames';
        </script>
    </li>

    <li>
      <strong>iframe calls parent's one.two.sum()</strong>
      <code id="testParentMemberNames"></code>
      <script type="text/partytown">
          const elm = document.getElementById('testParentMemberNames');
          const iframe = document.createElement('iframe');

          iframe.onload = () => {
            iframe.contentWindow.document.head.innerHTML = `<style>body { background: #f57ee6; }</style>`;

            const script = iframe.contentDocument.createElement('script');
            script.innerHTML = `
              const win = window;
              const parentWin = win.parent;
              parentWin.objA = {
                objB: {
                  sum(years) {
                    return 1955 + years;
                  },
                  num: 30,
                },
              };
              parentWin.subtract = (years) => {
                return 1985 - years;
              };
              parentWin.num = 100;
            `;

            iframe.contentDocument.body.appendChild(script);

            const win = window;

            const objA = win.objA;
            const objB = objA.objB;
            const objBSum = objB.sum;
            const objBNum = objB.num;

            const winSubtract = win.subtract;
            const winNum = win.num;

            const subtractResult = subtract(winNum);
            const objBSumResult = objBSum(objBNum);
            const result = objBSumResult + ' ' + subtractResult;

            const div = iframe.contentDocument.createElement('div');
            div.id = 'output';
            div.textContent = result;
            iframe.contentWindow.document.body.appendChild(div);

            elm.textContent = iframe.contentDocument.getElementById('output').textContent;
            elm.className = 'testParentMemberNames';
          };

          elm.parentNode.insertBefore(iframe, null);
        </script>
    </li>

    <li>
      <strong>iframe onload calls parent, no deadlock</strong>
      <code id="testNoDeadlock"></code>
      <script type="text/partytown">
          const elm = document.getElementById('testNoDeadlock');
          const iframe = document.createElement('iframe');
          iframe.id = 'deadlock-iframe';
          iframe.src = 'no-deadlock.html';
          iframe.onload = () => {
            const script = document.createElement('script');
            script.onload = () => {
              const iframeWin = iframe.contentWindow;
              const fn = iframeWin.fn;
              const result = fn(11);
              const output = iframeWin.document.getElementById('output');
              output.textContent = result;
              elm.className = 'testNoDeadlock';
            };
            script.src = 'no-deadlock.js';
            iframe.contentDocument.head.appendChild(script);
          };
          elm.parentNode.insertBefore(iframe, null);
        </script>
    </li>

    <li>
      <strong>global web worker var not shared</strong>
      <code id="testWWGlobalValue"></code>
      <code id="testWWGlobalNotShared"></code>
      <script type="text/partytown" src="no-global-share.js"></script>
      <script type="text/partytown">
          const elm = document.getElementById('testWWGlobalNotShared');
          const iframe = document.createElement('iframe');
          iframe.src = 'no-global-share.html';
          iframe.onload = () => {
            const out1 = document.getElementById('testWWGlobalValue').textContent;
            const out2 = iframe.contentDocument.getElementById('testWWGlobalValue').textContent;
            const testWWGlobalNotShared = document.getElementById('testWWGlobalNotShared');
            testWWGlobalNotShared.textContent = String(out1 !== out2);
            testWWGlobalNotShared.className = 'testWWGlobalNotShared';
          };
          elm.parentNode.appendChild(iframe);
        </script>
    </li>

    <li>
      <strong>frameElement</strong>
      <code id="testFrameElement"></code>
      <script type="text/partytown">
          const elm = document.getElementById('testFrameElement');
          const iframe = document.createElement('iframe');
          iframe.setAttribute('id', 'frameElement');
          elm.parentNode.appendChild(iframe);

          iframe.contentDocument.head.innerHTML = `
            <style>body { background: aquamarine; }</style>
          `;
          const iframeContentWindow = iframe.contentWindow;
          const iframeElement = iframeContentWindow.frameElement;
          const iframeElementId = iframeElement.id;
          iframe.contentDocument.body.textContent = iframeElementId;
          elm.textContent = iframe.contentWindow.document.body.textContent;
          elm.className = 'testFrameElement';
        </script>
    </li>

    <li>
      <strong id="labelSyncSetAttr">before sync setters, setAttribute</strong>
      <script type="text/partytown">
          (function () {
            const label = document.getElementById('labelSyncSetAttr');
            const iframe = document.createElement('iframe');
            label.parentNode.appendChild(iframe);

            iframe.contentDocument.head.innerHTML = `<style>body { background: gray; }</style>`;

            const script = iframe.contentDocument.createElement('script');
            script.innerHTML = `
              const code = document.createElement('code');
              code.setAttribute('data-mph', 88);
              code.textContent = code.dataset.mph;
              code.id = 'testSyncSetAttr';
              code.className = 'testSyncSetAttr';

              const label = parent.document.getElementById('labelSyncSetAttr');
              label.parentNode.insertBefore(code, label.nextSibling);
              document.body.appendChild(document.createTextNode(code.textContent));
            `;
            iframe.contentDocument.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>native fetch()</strong>
      <code id="testNativeFetch"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testNativeFetch');
            const iframe = document.createElement('iframe');
            document.head.appendChild(iframe);

            const fetch = iframe.contentWindow.fetch;
            document.head.removeChild(iframe);

            elm.textContent = String(fetch).includes(`[native code]`);
            elm.className = 'testNativeFetch';
          })();
        </script>
    </li>

    <li>
      <strong>parent.postMessage()</strong>
      <code id="testPostMessage"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testPostMessage');

            window.addEventListener('message', (ev) => {
              if (ev.data.mph === 99) {
                elm.textContent = `${ev.type} ${ev.data.mph} ${ev.origin === origin}`;
                elm.className = 'testPostMessage';
              }
            });

            const iframe = document.createElement('iframe');
            iframe.setAttribute('src', 'post-message.html');
            elm.parentNode.appendChild(iframe);
          })();
        </script>
    </li>

    <li>
      <strong>cross origin</strong>
      <code id="testCrossOrigin"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testCrossOrigin');
            const iframe = document.createElement('iframe');

            window.addEventListener('message', (ev) => {
              const eventInfo = `${ev.type} ${ev.data} ${ev.origin} ${
                ev.source === iframe.contentWindow
              }`;
              if (ev.data === '88' && ev.origin === 'https://partytown.qwik.dev') {
                elm.textContent = eventInfo;
                elm.className = 'testCrossOrigin';
              }
            });

            iframe.style.height = '45px';

            const url = new URL('https://partytown.qwik.dev/cross-origin');
            url.searchParams.set('parentorigin', window.origin);
            iframe.src = url.href;
            elm.parentNode.appendChild(iframe);
          })();
        </script>
    </li>

    <li>
      <strong>location</strong>
      <code id="testLocation"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testLocation');

            const iframe = document.createElement('iframe');
            iframe.src = 'location1.html?delay=100';
            elm.parentNode.appendChild(iframe);

            setTimeout(() => {
              iframe.src = 'location2.html?delay=100';
            }, 500);
          })();
        </script>
    </li>

    <li>
      <strong>src change</strong>
      <code id="testSrcChange">
          <span id="testSrcChange1"></span>
          <span id="testSrcChange2"></span>
        </code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSrcChange');

            const iframe = document.createElement('iframe');
            iframe.src = 'src-change1.html?delay=100';
            elm.parentNode.appendChild(iframe);

            setTimeout(() => {
              iframe.src = 'src-change2.html?delay=100';
            }, 500);
          })();
        </script>
    </li>

    <li>
      <strong>getElementsByTagName('iframe')[i].contentWindow.document</strong>
      <code id="testGetByTagName"></code>
      <iframe id="existing-iframe"></iframe>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testGetByTagName');
            const iframes = document.getElementsByTagName('iframe');
            for (let i = 0; i < iframes.length; i++) {
              const iframe = iframes[i];
              if (iframe.id === 'existing-iframe') {
                const contentWindow = iframe.contentWindow;
                elm.textContent = iframe.contentWindow.document.nodeName;
                elm.className = 'testGetByTagName';
              }
            }
          })();
        </script>
    </li>

    <li>
      <strong>getElementsById('existing-iframe2').getAttribute('src')</strong>
      <code id="testGetIframeSrc"></code>
      <iframe id="existing-iframe2" src="content.html"></iframe>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testGetIframeSrc');
            const iframe = document.getElementById('existing-iframe2');
            elm.textContent = new URL(iframe.getAttribute('src'), location.href).pathname;
            elm.className = 'testGetIframeSrc';
          })();
        </script>
    </li>

    <li>
      <strong>window.frames</strong>
      <code id="testWindowFrames"></code>
      <iframe id="window-frames"></iframe>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testWindowFrames');
            const iframe = document.getElementById('window-frames');
            iframe.contentWindow.name = 'window-frames';
            const framesLength = frames.length;

            for (let i = 0; i < framesLength; i++) {
              const frame = frames[i];
              if (frame.name === 'window-frames') {
                elm.textContent = frame.name;
                elm.className = 'testWindowFrames';
                break;
              }
            }
          })();
        </script>
    </li>

    <li>
      <strong>set javascript: source</strong>
      <code id="testSetJavascriptSrc"></code>
      <script type="text/partytown">
          (function() {
            const elm = document.getElementById('testSetJavascriptSrc');

            const iframe = document.createElement('iframe');
            iframe.src = 'javascript:void(0);';
            elm.parentNode.appendChild(iframe);

            elm.textContent = iframe.src;
            elm.className = 'testSetJavascriptSrc';
          })();
        </script>
    </li>
  </ul>

  <hr />
  <p><a href="/tests/">All Tests</a></p>
</body>

</html>